<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 需要引入Vue库 -->
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
    <style>
        /* 添加active类的样式，用于图片边框 */
        .active {
            border: 2px solid red;
        }
    </style>
</head>
<body>
<div id="app">
  <div>
    <h3 v-bind:title="title">切换图片边框</h3>
    <!-- 修正图片标签的空格问题 -->
    <img v-bind:src="img" width="100" height="100" v-bind:class="{ active: isActive }">
  </div>
  <!-- 添加了文本颜色和字体大小的数据绑定 -->
  <p v-bind:style="{ color: textColor, fontSize: fontSize + 'px' }">This is a paragraph.</p>
  <!-- 给按钮添加文字 -->
  <button @click="toggleActive">切换边框</button>
</div>
<script>
const comApp = Vue.createApp({
  data() {
    return {
      title: "切换图片边框",
      img: "./logo.png",
      // 初始化isActive状态
      isActive: false,
      // 添加样式相关的数据
      textColor: 'blue',
      fontSize: 16
    }
  },
  // 添加方法选项
  methods: {
    // 实现切换active状态的方法
    toggleActive() {
      this.isActive = !this.isActive;
    }
  }
}).mount("#app");
</script>
</body>
</html>